<template>
  <!-- #ifndef XT_PC -->
  <view
    v-if="!disabled"
    @click="showPicker=true"
  >
    <slot 
      :data="v" 
      :show-value="showValue"
    >
      <text :class="showValue?'':'x-text-light'">
        {{ showValue || '请选择' }}
      </text>
    </slot>
    <u-picker
      ref="uPicker"
      :show="showPicker"
      :columns="columns"
      @cancel="showPicker=false"
      @confirm="confirm"
      @change="changeHandler"
    />
  </view>
  <!-- #endif -->
  <!-- #ifdef XT_PC -->
  <!-- eslint-disable-next-line vue/no-multiple-template-root -->
  <el-cascader
    v-if="!disabled"
    :key="level"
    :size="size"
    :value="value"
    :options="options"
    @change="handleChange"
  />
  <!-- #endif -->
  <view v-else>
    {{ showValue }}
  </view>
</template>

<script>
  import districts from './districts.json' 
  delete districts['100000']['710000']
  delete districts['100000']['810000']
  delete districts['100000']['820000']
  export default {
    props: {
      size: {
        type: String,
        default: ''
      },
      level: {
        type: Number,
        default: 0
      },
      value: {
        type: Array,
        default: ()=>([])
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showPicker: false,
      }
    },
    computed: {
      showValue() {
        let province = this.value[0]?districts[100000][this.value[0]]:''
        let city = this.value[1]?districts[this.value[0]]&&districts[this.value[0]][this.value[1]]:''
        let county = this.value[2]?districts[this.value[1]]&&districts[this.value[1]][this.value[2]]:''
        return `${province||''}${city||''}${county||''}`
      },
      columns() {
        let ret = []
        if(this.level>=1) {
          ret.push(Object.entries(districts['100000']).map(([k,v])=>({
            text: v,
            id: k,
          })))
        }
        if(this.level>=2) {
          ret.push(Object.entries( districts[Object.entries(districts['100000'])[0][0]] ).map(([k,v])=>({
            text: v,
            id: k,
          })))
        }
        if(this.level>=3) {
          ret.push(Object.entries( districts[Object.entries( districts[Object.entries(districts['100000'])[0][0]] )[0][0]] ).map(([k,v])=>({
            text: v,
            id: k,
          })))
        }
        return ret
      },
      options() {
        let ret = Object.entries(districts["100000"]||{}).map(([k,v])=>{
          let ret = {
            value: k,
            label: v,
            children: this.level>=2?Object.entries(districts[k]||{}).map(([k,v])=>{
              let ret = {
                value: k,
                label: v,
                children: this.level>=3?Object.entries(districts[k]||{}).map(([k,v])=>{
                  let ret = {
                    value: k,
                    label: v,
                  }
                  return ret
                }):null
              }
              return ret
            }):null
          }
          return ret
        })
        return ret;
      }
    },
    methods: {
      handleChange(e) {
        this.$emit('change', e)
      },
      changeHandler(e) {
        const {
          columnIndex,
          value,
          values, // values为当前变化列的数组内容
          index,
          // 微信小程序无法将picker实例传出来，只能通过ref操作
          picker = this.$refs.uPicker
        } = e
        // 当第一列值发生变化时，变化第二列(后一列)对应的选项
        if (columnIndex === 0) {
          // picker为选择器this实例，变化第二列对应的选项
          if(this.level>=2) {
            picker.setColumnValues(1, Object.entries(districts[value[0].id]||{}).map(([k,v])=>({
              text: v,
              id: k,
            })))
          }
          if(this.level>=3) {
            picker.setColumnValues(2, Object.entries(districts[Object.entries(districts[value[0].id]||{})[0][0]]).map(([k,v])=>({
              text: v,
              id: k,
            })))
          }
        }else if(columnIndex === 1) {
          if(this.level>=3) {
            picker.setColumnValues(2, Object.entries(districts[value[1].id]||{}).map(([k,v])=>({
              text: v,
              id: k,
            })))
          }
        }
      },
      // 回调参数为包含columnIndex、value、values
      confirm(e) {
        this.$emit('change', e.value.map(v=>v?v.id:''))
        this.showPicker = false
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
